<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多肉世界——登录</title>
        <link rel="shortcut icon"type="image/x-icon" href="images/logo.png" media="screen" />        
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
   <body>
        <div class="userinfo">
            <a href="javascript:;">登陆</a>
            <a href="javascript:;">注册</a>
        </div>
        <div class="shadow">
            <div class="wrap">
                <div class="regAlog">
                    <a class="on" href="javascript:;">登陆</a>
                    <a href="javascript:;">注册</a>
                </div>
                <div class="content">
                    <div class="logPage on">
                        <p>
                            <label for="logUser">用户名</label><input id="logUser" placeholder="请输入用户名" type="text" />
                            <span class="advice"></span>
                        </p>
                        <p>
                            <label for="logPwd">密码</label><input id="logPwd" type="password" />
                            <span class="advice"></span>
                        </p>
                        <p>
                            <i></i>
                            <button class="login">登陆</button>
                            <i></i>
                        </p> 
                    </div>
                    <div class="regPage">
                        <p>
                            <label for="regUser">用户名</label><input id="regUser" placeholder="请输入用户名" type="text" />
                            <span class="advice"></span>
                        </p>
                        <p>
                            <label for="regEmail">邮箱</label><input id="regEmail" type="text" />
                            <span class="advice"></span>
                        </p>
                        <p>
                            <label for="regPwd">密码</label><input id="regPwd" type="text" />
                            <span class="advice"></span>
                        </p>
                        <p>
                            <label for="regRePwd">确认密码</label><input id="regRePwd" type="text" />
                            <span class="advice"></span>
                        </p>
                        <p>
                            <label for="regPhone">手机号</label><input id="regPhone" type="text" />
                            <span class="advice"></span>
                        </p>
                        <p>
                            <span></span>
                            <span class="judgeCode"><input id="phoneCode" type="text" /><button class="getCode">点击获取验证码</button></span>
                            <span class="advice"></span>
                        </p>
                        <p>
                            <span></span>
                            <span><input id="check" type="checkbox" /><label for="check"> 我已阅读  《多肉世界客户协议》</label></span>
                            <span></span>
                        </p>
                        <p>
                            <i></i>
                            <button class="register" disabled>注册</button>
                            <i></i>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        
        $(function(){
            
            $(".userinfo a").click(function(){
                $(".shadow").show();
                var index = $(this).index();
                $(".regAlog").find("a").eq(index).click();
            })
            
            $(".regAlog").find("a").click(function(){
                var index = $(this).index();
                console.log(index)
                $(".regAlog").find("a").removeClass("on")
                $(".content div").removeClass("on")
                $(this).addClass("on");
                $(".content div").eq(index).addClass("on");
                
            })
            
            
            //
            $("#regUser").blur(function(){    //不能以数组开头 ，6-12位
                if($(this).val().trim()){
                    var reg = /^[^0-9]\w{5,11}$/;
                    if(judeg(/^[^0-9]\w{5,11}$/,$("#regUser").val())){
//                      $(this).next().html("√")
//                      $(this).next().css("color","aqua");
                        $.ajax({
                            type:"get",
                            url:"http://localhost/study/php/judgeUser.php",
                            data:{
                                user:$("#regUser").val()
                            },
                            dataType:"json",
                            success:function(data){
                                console.log(data)
                                if(data.status){
                                    $("#regUser").next().html("×,该用户已经存在")
                                    $("#regUser").next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                                }else{
                                    $("#regUser").next().html("√")
                                    $("#regUser").next().css("color","aqua");
                                }
                            }
                            
                            
                        })
                    }else{
                        $(this).next().html("×,不能以数字开头 ，长度6-12位")
                        $(this).next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                    }
                }
                
            })
            
            $("#regEmail").blur(function(){    //不能以数组开头 ，6-12位
                if($(this).val().trim()){
                    
                    var reg = /^\w{1,}@\w{1,}\.(com|net)$/;
                    if(judeg(/^\w{1,}@\w{1,}\.(com|net)$/,$("#regEmail").val())){
//                      $(this).next().html("√")
//                      $(this).next().css("color","aqua")

                        $.ajax({
                                type:"get",
                                url:"http://localhost/study/php/judegEmail.php",
                                data:{
                                    email:$("#regEmail").val()
                                },
                                dataType:"json",
                                success:function(data){
                                    console.log(data)
                                    if(data.status){
                                        $("#regEmail").next().html(`×,${data.msg}`)
                                        $("#regEmail").next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                                    }else{
                                        $("#regEmail").next().html("√")
                                        $("#regEmail").next().css("color","aqua");
                                    }
                                }
                                
                                
                        })


                    }else{
                        $(this).next().html("×,格式不正确")
                        $(this).next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                    }
                }
                
                
            })
            
            $("#regPwd").blur(function(){    //不能以数组开头 ，6-12位
                if($(this).val().trim()){
                    
                    var reg = /^\w{6,12}$/;
                    if(judeg(/^\w{6,12}$/,$("#regPwd").val())){
                        $(this).next().html("√")
                        $(this).next().css("color","aqua")
                    }else{
                        $(this).next().html("×,格式不正确 ，长度6-12位")
                        $(this).next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                    }
                }
                
                
            })
            
            $("#regRePwd").blur(function(){    //不能以数组开头 ，6-12位
                if($(this).val().trim()){
                    
                    var reg = /^\w{6,12}$/;
                    if($("#regPwd").val()==$("#regRePwd").val()){
                        $(this).next().html("√")
                        $(this).next().css("color","aqua")
                    }else{
                        $(this).next().html("×,两次密码不相同")
                        $(this).next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                    }
                }
                
                
            })
            
            $("#regPhone").blur(function(){    //不能以数组开头 ，6-12位
                if($(this).val().trim()){
                    
                    var reg = /^1[2|3|5|7|8|9]\w{9}$/;
                    if(judeg(/^1[2|3|5|7|8|9]\w{9}$/,$("#regPhone").val())){
//                      $(this).next().html("√")
//                      $(this).next().css("color","aqua")
                    
                        $.ajax({
                                type:"get",
                                url:"http://localhost/study/php/judgePhone.php",
                                data:{
                                    phone:$("#regPhone").val()
                                },
                                dataType:"json",
                                success:function(data){
                                    console.log(data)
                                    if(data.status){
                                        $("#regPhone").next().html(`×,${data.msg}`)
                                        $("#regPhone").next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                                    }else{
                                        $("#regPhone").next().html("√")
                                        $("#regPhone").next().css("color","aqua");
                                    }
                                }
                                
                                
                        })

                    }else{
                        $(this).next().html("×,请输入正确的手机号")
                        $(this).next().css({color:"red",fontSize:"14px",lineHeight:"16px"})
                    }
                    
                }
                
                
            })
            
            $("#phoneCode").blur(function(){
                if($(this).val().trim()){
                    $.ajax({
                        type:"get",
                        url:"http://localhost/study/php/judgeCode.php",
                        data:{
                            code:$(this).val(),
                            phone:$("#regPhone").val()
                        },
                        dataType:"json",
                        success:function(data){
                            console.log(data)
                        }
                    });
                }
            })
            
            $("#check").click(function(){
                console.log($(this).prop("checked"))
                if($(this).prop("checked")){
                    $(".register").prop("disabled",false)
                    $(".register").css({background:"#6ff"})
                }else{
                    $(".register").prop("disabled",true)
                    $(".register").css({background:"buttonface"})
                }
            })
            
            
            
            var timer = null;
            $(".getCode").click(function(){
                if(judeg(/^1[2|3|5|7|8|9]\w{9}$/,$("#regPhone").val())){

                    $(this).prop("disabled",true);
                    
                    var count = 10;
                    $(this).html(`重新发送(${count})`)
                    var that = $(this);
                    timer = setInterval(function(){
                        count--;
                        that.html(`重新发送(${count})`);
                        if(count==0){
                            clearInterval(timer);
                            that.prop("disabled",false);
                            that.html(`点击获取验证码`);
                    }
                    },1000)
                
                    $.ajax({
                        type:"get",
                        url:"http://localhost/study/php/phpApiDemo/apiDemo/industrySMS.php",
                        data:{
                            phone:$("#regPhone").val()
                        },
                        dataType:"json",
                        success:function(data){
                            console.log(data)
                            alert(data.msg)
                        }
                    })
                }else{
                    alert("请先输入手机号")
                }
                

                
            })
            
            $(".register").click(function(){
                if($(".register")[0].isRegister){
                                alert("请不要重复注册")
                                return false;
                }else{
                    $.ajax({
                        type:"get",
                        url:"http://localhost/study/php/register.php",
                        async:true,
                        data:{
                            user:$("#regUser").val(),
                            email:$("#regEmail").val(),
                            phone:$("#regPhone").val(),
                            pwd:$("#regPwd").val()
                        },
                        dataType:"json",
                        success:function(data){
                            console.log(data)
                            if(data.status){
                            
                                $(".register")[0].isRegister = true;
                            
                            }
                            alert(data.msg)
                        }
                    });
                }
            })
            
            //登陆
            $(".login").click(function(){
                if($("#logUser").val().trim()&&$("#logPwd").val().trim()){
                    $.ajax({
                        type:"get",
                        url:"http://localhost/study/php/login.php",
                        data:{
                            ways:$("#logUser").val().trim(),
                            pwd:$("#logPwd").val().trim()
                        },
                        dataType:"json",
                        success:function(data){
                            console.log(data);
                            if(data.status){
                                // $(".userinfo").html(`你好,${data.user_name}`);
                                window.location.href ="index.html";
                                var obj  = {
                                    user_name:data.user_name,
                                    user_id:data.user_id
                                }
                                setCookie("userinfo",obj)
//                              document.cookie
                                $(".shadow").hide()
                            }else{
                                alert(data.msg);
                            }
                        }
                    })
                }
            })
            
            function judeg(reg,content){
                if(reg.test(content)){
                    return true;
                }else{
                    return false;
                }
            }
            
        })
    </script>
    
</html>